<template>
  <div class="page-container">
    <div class="page-search-card">
      <el-form ref="form" label-width="150px" :model="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分配主题：" prop="grantTheme">
              <el-input v-model="form.grantTheme" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分配日期：">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%"
                :default-time="['00:00:00', '23:59:59']"
                @change="onDateChange"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名：" prop="realName">
              <el-input v-model="form.realName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="手机号码：" prop="loginName">
              <el-input v-model="form.loginName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item class="page-search-btns">
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="query">查询</el-button>
              <el-button type="primary" @click="exportAll">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="page-table-container">
      <wf-el-table
        height="100%"
        :list="list"
        :total="total"
        :loading="loading"
        :current="current"
        @on-page-change="onPageChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="grantTheme" label="分配主题"></el-table-column>
        <el-table-column prop="realName" width="150" label="姓名"></el-table-column>
        <el-table-column prop="phone" width="150" label="手机号码"></el-table-column>
        <el-table-column prop="deptName" width="150" label="部门"></el-table-column>
        <el-table-column prop="totalAmount" width="150" label="分配额度（元）"></el-table-column>
        <el-table-column prop="state" width="150" label="状态">
          <template slot-scope="scope">
            {{ ['已兑换', '已分配'][scope.row.state - 1] || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="operRealName" width="150" label="企业发放人"></el-table-column>
        <el-table-column prop="createUsername" width="150" label="企业发放人账号"></el-table-column>
        <el-table-column prop="createTime" width="200" label="发放时间"></el-table-column>
      </wf-el-table>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import WfElTable from '@/components/Table/index';
  import { downloadBlob } from '@/utils/download';

  import { getDistributeHistoryList, exportDistributeHistory } from '@/api/careCard';

  export default {
    components: { WfElTable },
    data() {
      return {
        form: {
          grantTheme: '',
          startTime: '',
          endTime: '',
          realName: '',
          loginName: '',
        },
        dataTime: [],
        list: [],
        total: 0,
        current: 1,
        selectIds: [],
        selectRow: {},
        loading: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
    },
    // mounted() {
    //   this.initTable();
    // },
    activated() {
      this.initTable();
    },
    methods: {
      async initTable() {
        this.loading = true;
        const params = {
          pageCurrrent: this.current,
          pageSize: 10,
          organizationId: this.organizationId,
          ...this.form,
        };
        const { data } = await getDistributeHistoryList(params);
        const { records, total } = data;
        this.total = total;
        this.list = records;
        this.loading = false;
      },
      onSelectionChange(data) {
        this.selectIds = data.map(item => item.soleId);
      },
      onPageChange(data) {
        this.current = data.current;
        this.initTable();
      },
      query() {
        this.current = 1;
        this.initTable();
      },
      reset() {
        this.$refs['form'].resetFields();
        this.dataTime = [];
        this.form.startTime = '';
        this.form.endTime = '';
      },
      async exportAll() {
        const getIds = () => (this.selectIds.length > 0 ? { ids: this.selectIds } : {});
        const res = await exportDistributeHistory({
          pageCurrrent: 1,
          pageSize: 5000,
          organizationId: this.organizationId,
          ...this.form,
          ...getIds(),
        });
        res && downloadBlob(res.data, '发放记录.xls');
      },
      onDateChange(value) {
        console.log(value);
        [this.form.startTime = '', this.form.endTime = ''] = value || [];
      },
    },
  };
</script>

<style lang="scss" scoped>
  .page-table-container {
    height: calc(100% - 152px);
  }
</style>
